<template>
    <view class="container">
        <!-- 标题 -->
        <view class="header">
            <text class="title">添加用户信息</text>
        </view>
        
        <!-- 表单区域 -->
        <view class="form-container">
            <!-- 用户名 -->
            <view class="input-group">
                <text class="label">用户名：</text>
                <input 
                    v-model="formData.username" 
                    class="input" 
                    placeholder="请输入用户名(3-20位)"
                    placeholder-class="placeholder"
                    maxlength="20"
                />
            </view>
            
            <!-- 密码 -->
            <view class="input-group">
                <text class="label">密码：</text>
                <input 
                    v-model="formData.password" 
                    class="input" 
                    type="password"
                    placeholder="请输入密码(至少6位)"
                    placeholder-class="placeholder"
                    maxlength="100"
                />
            </view>
            
            <!-- 手机号 -->
            <view class="input-group">
                <text class="label">手机号：</text>
                <input 
                    v-model="formData.mobile" 
                    class="input" 
                    type="number"
                    placeholder="请输入手机号"
                    placeholder-class="placeholder"
                    maxlength="11"
                />
            </view>
            
            <!-- 邮箱 -->
            <view class="input-group">
                <text class="label">邮箱：</text>
                <input 
                    v-model="formData.email" 
                    class="input" 
                    placeholder="请输入邮箱(可选)"
                    placeholder-class="placeholder"
                    maxlength="50"
                />
            </view>
            
            <!-- 昵称 -->
            <view class="input-group">
                <text class="label">昵称：</text>
                <input 
                    v-model="formData.nickname" 
                    class="input" 
                    placeholder="请输入昵称(可选)"
                    placeholder-class="placeholder"
                    maxlength="30"
                />
            </view>
            
            <!-- 提交按钮 -->
            <button 
                class="submit-btn" 
                @click="submitForm"
                :disabled="!canSubmit"
            >
                {{ loading ? '提交中...' : '添加用户' }}
            </button>
        </view>
        
        <!-- 结果显示 -->
        <view v-if="result" class="result-container">
            <text class="result-title">操作结果：</text>
            <text class="result-text">{{ result }}</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                username: '',
                password: '',
                mobile: '',
                email: '',
                nickname: ''
            },
            loading: false,
            result: ''
        }
    },
    computed: {
        canSubmit() {
            return this.formData.username && 
                   this.formData.password && 
                   this.formData.mobile &&
                   this.formData.username.length >= 3 &&
                   this.formData.password.length >= 6 &&
                   this.formData.mobile.length === 11
        }
    },
    methods: {
        async submitForm() {
            // 前端验证
            if (!this.formData.username || this.formData.username.length < 3) {
                uni.showToast({
                    title: '用户名至少3位',
                    icon: 'none'
                })
                return
            }
            
            if (!this.formData.password || this.formData.password.length < 6) {
                uni.showToast({
                    title: '密码至少6位',
                    icon: 'none'
                })
                return
            }
            
            if (!this.formData.mobile || this.formData.mobile.length !== 11) {
                uni.showToast({
                    title: '请输入11位手机号',
                    icon: 'none'
                })
                return
            }
            
            this.loading = true
            this.result = ''
            
            try {
                // 调用云函数
                const res = await uniCloud.callFunction({
                    name: 'addUser',
                    data: this.formData
                })
                
                console.log('云函数返回结果：', res)
                
                if (res.result.code === 200) {
                    this.result = `添加成功！用户名：${res.result.data.username}，手机号：${res.result.data.mobile}`
                    uni.showToast({
                        title: '添加成功',
                        icon: 'success'
                    })
                    
                    // 清空表单
                    this.formData = {
                        username: '',
                        password: '',
                        mobile: '',
                        email: '',
                        nickname: ''
                    }
                } else {
                    this.result = `添加失败：${res.result.message}`
                    uni.showToast({
                        title: res.result.message,
                        icon: 'none'
                    })
                }
                
            } catch (error) {
                console.error('调用云函数失败：', error)
                this.result = '网络错误，请检查连接'
                uni.showToast({
                    title: '网络错误',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.header {
    text-align: center;
    margin-bottom: 40rpx;
    padding: 20rpx;
    background-color: white;
    border-radius: 10rpx;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.form-container {
    background-color: white;
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 30rpx;
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    border-bottom: 1rpx solid #eee;
    padding-bottom: 20rpx;
}

.label {
    width: 140rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
}

.input {
    flex: 1;
    font-size: 28rpx;
    padding: 20rpx;
    border: none;
    outline: none;
}

.placeholder {
    color: #999;
    font-size: 26rpx;
}

.submit-btn {
    background-color: #007AFF;
    color: white;
    border: none;
    border-radius: 10rpx;
    padding: 25rpx;
    font-size: 32rpx;
    margin-top: 30rpx;
}

.submit-btn:disabled {
    background-color: #ccc;
}

.result-container {
    background-color: white;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-top: 20rpx;
}

.result-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
}

.result-text {
    font-size: 28rpx;
    color: #666;
    word-break: break-all;
    line-height: 1.6;
}
</style>